<template>
  <div class="person">
    <ul v-for="p in list" :key="p.id">
    <li>{{ p.id }} -- {{ p.name }} -- {{ p.age }}</li>
  </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
import { type Persons } from "@/types";
import { withDefaults } from "vue";
// 1. 接收 parent 组件的传参
// defineProps(["list"]);
// 2. 接收 parent 组件的传参 + 限制类型
// defineProps<{ list: Persons }>();
// 3. 接收 parent 组件的传参 + 限制类型 + 指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: "0009", name: "Lucy", age: 16 }],
});
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>